<template>
    <ClientOnly>
        <PlayVideoVue
          class="video"
          autoplay
          :src="bannerVideo"
          :width="getPageWidth()"
          loop
          :controls="false"
          muted
          fit="cover">
            <img class="banner-image" :src="bannerText" mode="scaleToFill" />
            <RoundButton_pc class="about" @click="$router.push('/about')">关于我们</RoundButton_pc>
        </PlayVideoVue>
    </ClientOnly>
</template>

<script setup lang="ts">
import bannerVideo from '@/assets/video/banner1.mp4'
import bannerText from '@/assets/images/banner-text.png'
import { getPageWidth } from '@/utils/tools'
</script>


<style lang="scss" scoped>
.video{
    width: 100%;
    height: 100%;
    pointer-events: none;
    .banner-image{
        position: absolute;
        left: 50%;
        top: 40%;
        width: 472px;
        height: 127px;
        transform: translate(-50%, -50%);
    }
    .about{
        position: absolute;
        z-index: 10;
        left: 50%;
        top: 60%;
        transform: translate(-50%, -50%);
    }
}
</style>